<template>
  <el-row v-loading="table_loading" class="main">
    <el-col :span="24" class="main">
      <el-card shadow="hover">
        <el-table :data="rlData">
          <el-table-column
              label="状态"
              min-width="100"
              align="center"
              filter-placement="bottom-end"
              :filters="[
              { text: '返校', value: 0 },
              { text: '离校', value: 1 },
            ]"
              :filter-method="typeFilter"
          >
            <template #default="scope">
              <span type="warning" v-if="scope.row.type === 0">返校</span>
              <span type="success" v-if="scope.row.type === 1">离校</span>
            </template>
          </el-table-column>


          <el-table-column label="日期" min-width="150" align="center" sortable prop="start_time">
            <template #default="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{
                  moment(scope.row.date_time).format("YYYY年MM月DD日 HH:mm:ss")
                }}</span>
            </template>
          </el-table-column>
          <el-table-column label="地点" min-width="200" align="center" prop="place">
            <template #default="scope">
              <span>{{ scope.row.place }}</span>
            </template>
          </el-table-column>
          <el-table-column label="方式" min-width="100" align="center" prop="place">
            <template #default="scope">
              <el-tooltip
                  :content="scope.row.train_number"
                  placement="bottom"
                  effect="light"
              >
                <el-tag type="primary">{{ transport[scope.row.method].label }}</el-tag>
              </el-tooltip>
            </template>
          </el-table-column>


          <el-table-column
              label="状态"
              min-width="100"
              align="center"
              filter-placement="bottom-end"
              :filters="[
              { text: '已过期', value: -2 },
              { text: '待审核', value: 0 },
              { text: '审核通过', value: 1 },
              { text: '审核未通过', value: -1 },
            ]"
              :filter-method="stateFilter"
          >
            <template #default="scope">
              <el-popover
                  ref="popover"
                  placement="bottom"
                  title=""
                  width="200"
                  trigger="hover"
                  v-if="scope.row.state === -1"
              >
                <template #default>
                  <el-descriptions title="处理结果" :column="1" border direction="vertical " v-loading="info_loading">
                    <el-descriptions-item label="审批时间" label-class-name="my-label" content-class-name="my-content">
                      {{ scope.row.approval.date_time }}
                    </el-descriptions-item>
                    <el-descriptions-item label="意见">{{ scope.row.approval.suggestion }}</el-descriptions-item>
                  </el-descriptions>
                </template>
                <template #reference>
                  <el-tag type="info">审核未通过</el-tag>
                </template>
              </el-popover>

              <el-popover
                  ref="popover"
                  placement="bottom"
                  title=""
                  width="200"
                  trigger="hover"
                  v-if="scope.row.state === 0"
              >
                <template #default>
                  <el-button
                      size="mini"
                      type="primary"
                      @click="handler(scope.$index,scope.row, 1)"
                  >通过
                  </el-button>
                  <el-button size="mini" type="info" @click="handler(scope.$index,scope.row, 0)"
                  >拒绝
                  </el-button>
                </template>
                <template #reference>
                  <el-tag type="warning">待审核</el-tag>

                </template>
              </el-popover>

              <el-tag type="success" v-if="scope.row.state === 1">审核通过</el-tag>
              <el-tooltip
                  v-if="scope.row.state === 2"
                  :content="scope.row.state"
                  placement="bottom"
                  effect="light"
              >
                <el-tag type="danger">审核未通过</el-tag>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="申请人" min-width="100" align="center">
            <template #default="scope">
              <el-popover
                  ref="popover"
                  placement="left"
                  title=""
                  width="200"
                  trigger="click"
              >
                <template #default>
                  <el-descriptions title="个人信息" :column="3" border direction="vertical " v-loading="info_loading">
                    <el-descriptions-item span="3" align="center">
                      <el-avatar :size="300" src="https://empty" @error="errorHandler">
                        <img :src=src+scope.row.student.uid />
                      </el-avatar>
                    </el-descriptions-item>

                    <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">
                      {{ userInfo.name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">{{ userInfo.mobile }}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{ userInfo.sex }}</el-descriptions-item>
                    <el-descriptions-item label="专业">{{ userInfo.major }}</el-descriptions-item>
                    <el-descriptions-item label="班级">{{ userInfo.uclass }}</el-descriptions-item>
                  </el-descriptions>
                </template>
                <template #reference>
                  <el-button @click="getStudentInfo(scope.row.student.uid)">
                    查看详情
                  </el-button>
                </template>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>


  <el-dialog title="审批处理" v-model="dialogVisible" width="30%">
    <el-form label-width="80px">
      <el-form-item label="意见">
        <el-input
            type="textarea"
            :autosize="{ maxRows: 8 ,minRows:3}"
            placeholder="请输入意见"
            v-model="suggest"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false;suggest = ''">取 消</el-button>
        <el-button type="primary" @click="updateSuggestion(-1)">拒绝</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {getRLByTeacherId, rlChange} from "/src/network/rlschool"
import {Msg} from "../../../utils/pubMethod";
import moment from "moment";
import {transport} from "/src/utils/static"
import {getStudentInfoByUid} from "../../../network/student";
import {updateApproval, getApproval} from "../../../network/approval";


export default {
  name: "approvalRLschool",
  data() {
    return {
      moment,
      transport,
      rlData: [],
      table_loading: false,
      dialogVisible: false,
      suggest: '',
      src: 'http://localhost:3211/api/img/',
      info_loading: false,
      userInfo: [],
      rl_id: ''
    }
  },
  created() {
    this.getRLByTeacherId()
  },
  methods: {
    getRLByTeacherId() {
      this.table_loading = true
      getRLByTeacherId().then(res => {
        try {
          if (res.code === 200) {
            this.table_loading = false
            this.rlData = res.data
          } else {
            this.table_loading = false
            Msg(this.$message, 'error', res.data)
          }
        } catch (e) {
          this.table_loading = false
          Msg(this.$message, 'error', '网络连接失败')
        }
      }, err => {
      })
    },
    updateSuggestion(result) {
      let form = {
        "suggestion": this.suggest,
        "result": result,
      }
      let id = this.rl_id
      this.table_loading = true
      updateApproval(form, id).then(res => {
        try {
          if (res.code === 200) {
            this.table_loading = false
            this.getRLByTeacherId()
            Msg(this.$message, 'success', res.data)
          } else {
            this.table_loading = false
            Msg(this.$message, 'error', res.data)
          }
        } catch (e) {
          this.table_loading = false
          Msg(this.$message, 'error', '网络连接失败')
        }
      }, err => {

      })
      this.dialogVisible = false
    },
    handler(index, row, type) {
      this.rl_id = row.uid
      if (type === 0) {
        this.dialogVisible = true

      } else {
        this.updateSuggestion(1)
      }
    },
    stateFilter(value, row) {
      return row.state === value;
    },
    typeFilter(value, row) {
      return row.type === value;
    },
    errorHandler() {
      return true
    },
    getStudentInfo(uid) {
      this.info_loading = true
      getStudentInfoByUid(uid).then(res => {
        try {
          if (res.code === 200) {
            this.info_loading = false
            this.userInfo = res.data
          } else {
            this.info_loading = false
            Msg(this.$message, 'error', res.data)
          }
        } catch (e) {
          this.info_loading = false
          Msg(this.$message, 'error', '网络连接失败')
        }
      }, err => {
      })
    }
  }

}
</script>

<style scoped>

</style>